<template>
  <div id="pageWindow" class="container main-page">
    <!-- 头部图片 -->
    <div class="banner">
      <img v-lazy="totalPic.index01" alt>
      <img class="share" @click="onShare" :src="totalPic.share_btn" alt>
      <scroll class="scroll-component" :data="goodsList" time="1500"></scroll>
    </div>
    <!-- 活动倒计时, 游戏 -->
    <div class="count-down">
      <div class="tip">距离活动{{calcTimeTxt}}还有</div>
      <div class="time">
        <span>
          <em>{{ totalTime.qianwan }}</em>
          <em>{{ totalTime.baiwan }}</em> 天
        </span>
        <span>
          <em>{{ totalTime.shiwan }}</em>
          <em>{{ totalTime.wan }}</em> 时
        </span>
        <span>
          <em>{{ totalTime.qian }}</em>
          <em>{{ totalTime.bai }}</em> 分
        </span>
        <span>
          <em>{{ totalTime.shi }}</em>
          <em>{{ totalTime.ge }}</em> 秒
        </span>
      </div>
      <img v-lazy="totalPic.countdow"  @click="enterGamePage" alt="">
    </div>
    <!--领取优惠劵 -->
    <div class="coupon-wraper">
      <div class="coupon">
        <div class="coupon-list">
          <div class="single-coupon" @click="getCoupon(item,i)" v-for="(item, i) in conponInfo" :key="i">
            <img v-lazy="totalPic.index02"  alt>
            <span class="count_num">{{item.price}}</span>
            <span class="count_limit">满{{item.totalPrice}}元使用</span>
            <div class="mask" v-if="item.type==1">已领</div>
          </div>
        </div>
        <div class="get-btn" @click="getAllCoupon"><img :src="totalPic.get" alt></div>
      </div>
      <div><img @click="getCouponVip(singSivp)" v-lazy="totalPic.vip" alt></div>
    </div>
    <!-- 秒杀专区 -->
    <div class="title"><x-img :src="totalPic.lineTitle1"></x-img></div>
    <div class="tab-button" v-if="showKillTab">
      <span @click="changeIndex(0)" :class="{active:isActive==0}"><img v-lazy="totalPic.index31" alt></span>
      <span @click="changeIndex(1)" v-if="showNextDayTab" :class="{active:isActive==1}"><img v-lazy="totalPic.index32" alt></span>
    </div>
    <div class="seckill-region">
      <div class="seckill-goods">
        <div class="goods-wrap" v-if="isActive==0">
          <div class="goods" @click="skipGoods(item)" v-for="(item, i) in todayList" :key="i">
            <div class="title" :style="{changeColor:(item.saleCount==0||item.saleCount==3)}">{{item.timeStr}}</div>
            <div class="goods-pic">
              <img class="icon" v-if="(i==0||i==1)" :src="totalPic.discount50" alt="">
              <img class="icon" v-if="i==2" :src="totalPic.discount100" alt="">
              <img :src="item.img320_url" alt>
            </div>
            <div class="goods-name">{{ item.goods_name}}</div>
            <div class="price-btn">
              <span>￥{{item.flash_price}}</span>
              <span class="buy-btn" v-if="item.saleCount == 0" style="background:#ccc">商品售罄</span>
              <span class="buy-btn" v-else-if="item.saleCount == 2" @click.stop="remindMe(item,'tab1')" style="background:#FE8F1C">提醒我</span>
              <span class="buy-btn" v-else-if="item.saleCount == 3" style="background:#ccc">已订阅</span>
              <span class="buy-btn" v-else>立即抢购</span>
            </div>
          </div>
        </div>
        <!-- 明日预告 -->
        <div class="goods-wrap" v-if="isActive==1">
          <div class="goods" @click="skipGoods(item)" v-for="(item, i) in nextdayList" :key="i">
            <div class="title" :style="{changeColor:(item.saleCount==0||item.saleCount==3)}">{{item.timeStr}}</div>
            <div class="goods-pic">
              <img class="icon" v-if="i==0||i==1" :src="totalPic.discount50" alt="">
              <img class="icon" v-if="i==2" :src="totalPic.discount100" alt="">
              <img :src="item.img320_url" alt>
            </div>
            <div class="goods-name">{{ item.goods_name}}</div>
            <div class="price-btn">
              <span>￥{{item.flash_price}}</span>
              <span class="buy-btn" v-if="item.saleCount == 0" style="background:#ccc">商品售罄</span>
              <span class="buy-btn" v-else-if="item.saleCount == 2" @click.stop="remindMe(item,'tab2')" style="background:#FE8F1C">提醒我</span>
              <span class="buy-btn" v-else-if="item.saleCount == 3" style="background:#ccc">已订阅</span>
              <span class="buy-btn" v-else>立即抢购</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 超级会员秒杀 -->
    <div class="svip pos-rel">
      <div class="btn width_left" @click="linkTo('/TaoAction/superSeckill.html')"></div>
      <div class="btn width_right" @click="jumpTo()"></div>
      <img :src="totalPic.index03" alt>
    </div>
    <!-- 品类会场 -->
    <div class="title"><img :src="totalPic.index04" alt></div>
    <div class="pos-rel">
      <img v-lazy="totalPic.index05" alt>
      <div class="width_33_1" @click="linkTo('/TaoAction/clothesSub')"></div>
      <div class="width_33_2" onclick="jump2special(62055)"></div>
      <div class="width_33_3" onclick="jump2special(62257)"></div>
    </div>
    <div class="pos-rel">
      <img v-lazy="totalPic.index06" alt>
      <div class="width_33_1" @click="linkTo('/TaoAction/clothesSub')"></div>
      <div class="width_33_2" onclick="jump2special(62141)"></div>
      <div class="width_33_3" onclick="jump2special(62417)"></div>
    </div>
    <div class="pos-rel">
      <img v-lazy="totalPic.index07" alt>
      <div class="width_33_1" onclick="jump2special(62223)"></div>
      <div class="width_33_2" onclick="jump2special(61971)"></div>
      <div class="width_33_3" @click="linkTo('/TaoAction/fashionClothes')"></div>
    </div>
    <div class="pos-rel">
      <img v-lazy="totalPic.index08" alt>
      <div class="width_33_1" onclick="jump2special(62227)"></div>
      <div class="width_33_2" onclick="jump2special(62207)"></div>
      <div class="width_33_3" @click="linkTo('/TaoAction/fashionClothes')"></div>
    </div>
    <div class="pos-rel">
      <img v-lazy="totalPic.index09" alt>
      <div class="width_33_1" @click="linkTo('/TaoAction/shoeBags')"></div>
      <div class="width_33_2" onclick="jump2special(61835)"></div>
      <div class="width_33_3" onclick="jump2special(61823)"></div>
    </div>
    <div class="pos-rel">
      <img v-lazy="totalPic.index10" alt>
      <div class="width_33_1" @click="linkTo('/TaoAction/shoeBags')"></div>
      <div class="width_33_2" onclick="jump2special(61867)"></div>
      <div class="width_33_3" onclick="jump2special(62309)"></div>
    </div>
    <div class="pos-rel">
      <img v-lazy="totalPic.index11" alt>
      <div class="width_33_1" onclick="jump2special(62031)"></div>
      <div class="width_33_2" onclick="jump2special(62127)"></div>
      <div class="width_33_3" @click="linkTo('/TaoAction/digital')"></div>
    </div>
    <div class="pos-rel">
      <img v-lazy="totalPic.index12" alt>
      <div class="width_33_1" onclick="jump2special(62125)"></div>
      <div class="width_33_2" onclick="jump2special(62017)"></div>
      <div class="width_33_3" @click="linkTo('/TaoAction/digital')"></div>
    </div>
    <div class="pos-rel">
      <img v-lazy="totalPic.index13" alt>
      <div class="width_33_1" @click="linkTo('/TaoAction/more')"></div>
      <div class="width_33_2" onclick="jump2special(61499)"></div>
      <div class="width_33_3" onclick="jump2special(62251)"></div>
    </div>
    <div class="pos-rel">
      <img v-lazy="totalPic.index14" alt>
      <div class="width_33_1" @click="linkTo('/TaoAction/more')"></div>
      <div class="width_33_2" onclick="jump2special(62079)"></div>
      <div class="width_33_3" onclick="jump2special(61973)"></div>
    </div>
    <div class="pos-rel" @click="linkTo('/TaoAction/newSeason')"> <img v-lazy="totalPic.index15" alt></div>
    <div class="pos-rel">
      <img v-lazy="totalPic.index16" alt>
      <div class="left_50" @click="linkTo('/TaoAction/clothesSub')"></div>
      <div class="right_50" @click="linkTo('/TaoAction/discountSub')"></div>
    </div>
    <!-- 春夏新势力 -->
    <div class="title"><img v-lazy="totalPic.index17" alt></div>
    <div class="pos-rel">
      <img v-lazy="totalPic.index25" alt>
      <div class="width_33_1" onclick="jump2special(62141)"></div>
      <div class="width_33_2" onclick="jump2special(62059)"></div>
      <div class="width_33_3" onclick="jump2special(62191)"></div>
      <!-- <div class="video">
        <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"></video-player>
      </div> -->
    </div>
    <div class="pos-rel">
      <img v-lazy="totalPic.index26" alt>
      <div class="width_33_1" onclick="jump2special(62321)"></div>
      <div class="width_33_2" onclick="jump2special(62155)"></div>
      <div class="width_33_3" onclick="jump2special(62323)"></div>
    </div>
    <div class="pos-rel">
      <img v-lazy="totalPic.index27" alt>
      <div class="width_33_1" onclick="jump2special(62221)"></div>
      <div class="width_33_2" onclick="jump2special(62227)"></div>
      <div class="width_33_3" onclick="jump2special(62201)"></div>
    </div>
    <!-- <div class="pos-rel">
      <img v-lazy="totalPic.index28" alt>
      <div class="width_33_1" onclick="jump2special(62059)"></div>
      <div class="video">
        <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions1"></video-player>
      </div>
    </div> -->
    <div class="pos-rel">
      <img v-lazy="totalPic.index29" alt>
      <div class="width_33_1" onclick="jump2special(61833)"></div>
      <div class="width_33_2" onclick="jump2special(61865)"></div>
      <div class="width_33_3" onclick="jump2special(61961)"></div>
    </div>
    <!-- <div class="pos-rel">
      <img v-lazy="totalPic.index30" alt>
      <div class="width_33_1" onclick="jump2special(62017)"></div>
      <div class="width_33_2" onclick="jump2special(62191)"></div>
      <div class="width_33_3" @click="linkTo('/TaoAction/newSeason')"></div>
    </div> -->
    <!-- 大牌领衔 C位担当 -->
    <div class="title"><img v-lazy="totalPic.index18" alt></div>
    <div class="pos-rel">
      <img v-lazy="totalPic.index19" alt>
      <div class="width_33_1" onclick="jump2special(62143)"></div>
      <div class="width_33_2" onclick="jump2special(62145)"></div>
      <div class="width_33_3" onclick="jump2special(62349)"></div>
    </div>
    <div class="pos-rel">
      <img v-lazy="totalPic.index20" alt>
      <div class="width_33_1" onclick="jump2special(62223)"></div>
      <div class="width_33_2" onclick="jump2special(62057)"></div>
      <div class="width_33_3" onclick="jump2special(62207)"></div>
    </div>
    <div class="pos-rel">
      <img v-lazy="totalPic.index21" alt>
      <div class="width_33_1" onclick="jump2special(62305)"></div>
      <div class="width_33_2" onclick="jump2special(61969)"></div>
      <div class="width_33_3" onclick="jump2special(62079)"></div>
    </div>
    <div class="pos-rel">
      <img v-lazy="totalPic.index22" alt>
      <div class="width_25_1" onclick="jump2special(62417)"></div>
      <div class="width_25_2" onclick="jump2special(62161)"></div>
      <div class="width_25_3" onclick="jump2special(62043)"></div>
      <div class="width_25_4" onclick="jump2special(62227)"></div>
    </div>
    <div class="pos-rel">
      <img v-lazy="totalPic.index23" alt>
      <div class="width_25_1" onclick="jump2special(62221)"></div>
      <div class="width_25_2" onclick="jump2special(61839)"></div>
      <div class="width_25_3" onclick="jump2special(62307)"></div>
      <div class="width_25_4" onclick="jump2special(62215)"></div>
    </div>
    <!-- 更多专区 -->
    <div class="title"><img v-lazy="totalPic.index24" alt></div>
    <div class="more"></div>
    <div style="width:100%;height:1.6rem;"></div>
    <!-- 底部按钮 -->
    <div class="bottom-btn">
      <div class="width_25_1" @click="activitySwitch(0)"></div>
      <div class="width_25_2" @click="activitySwitch(1)"></div>
      <div class="width_25_3" @click="activitySwitch(2)"></div>
      <div class="width_25_4" @click="activitySwitch(3)"></div>
      <img v-lazy="totalPic.bottomBtn" alt>
    </div>
    <div class="modal-mask" v-show="showModal">
      <div class="svip" v-if="mask==1"><img :src="totalPic.win01" alt=""><span class="close" @click="closeModal"></span></div>
      <div class="focus" v-if="mask==2"><img :src="totalPic.win02" alt=""><span class="close" @click="closeModal"></span></div>
      <div class="ticket" v-if="mask==3"><img :src="totalPic.win03" alt=""><span class="close" @click="closeModal"></span></div>
    </div>
  </div>
</template>
<script>
import myVideo from "vue-video";
import scroll from "./scroll";
import { backTop } from "assets/js/sdjjPublic.js";
import BaseUrl from "@/utils/ajaxRequest.js";
import { resetAddress, filterPic } from "@/utils/utils.js";
export default {
  components: { scroll, myVideo },
  data() {
    return {
      isAjax:false,//防止重复点击
      calcTimeTxt:'开始',//倒计时文字
      setLinkString: "", //图片的基本地址
      pageName: "index", //图片分类的名称
      isSuperVip: false, //是否是SVIP
      isActive: 0, //默认今日秒杀
      isConsole: false,
      mask:0,//弹出层
      showModal:false,//默认隐藏弹窗
      goodsList: [], //滚动优惠券
      todayList: [], //今日秒杀商品
      nextdayList: [], //明日秒杀商品
      changeColor:{backgroundColor:'#ccc'},
      options: {
        autoplay: false,
        volume: 0.6,
        poster: "http://covteam.u.qiniudn.com/poster.png"
      },
      i: 0, //初始衰减值
      time: 0, //返回的倒计时总数值（秒）
      totalTime: {}, //倒计时
      getAll: 0, //默认可以一键领取
      conponInfo: [], //优惠券信息
      singSivp:{},//超级会员
      imgStore: [], //页面的图片集合
      totalPic: {}, // 图片
      playerOptions: {
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "",
            src: window.location.hostname == "activity.shandjj.com"
          ? "http://mstatic.shandjj.com/"
          : "http://mstatic.sdjjia.com/" + "default/ActiveImg/video/video.mp4" //url地址
          }
        ],
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: false,
          durationDisplay: false,
          remainingTimeDisplay: false,
          fullscreenToggle: false //全屏按钮
        }
      },
      playerOptions1: {
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "",
            src: window.location.hostname == "activity.shandjj.com"
          ? "http://mstatic.shandjj.com/"
          : "http://mstatic.sdjjia.com/" + "default/ActiveImg/video/video2.mp4" //url地址
          }
        ],
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: false,
          durationDisplay: false,
          remainingTimeDisplay: false,
          fullscreenToggle: false //全屏按钮
        }
      },
      showKillTab:false,//默认隐藏秒杀tab
      nowTime:null,//当前时间
      showNextDayTab:true,//默认显示明天秒杀tab
      killStartTime:new Date('2019-03-28T00:00:00').getTime(),
      killEndTime:new Date('2019-04-03T09:30:00').getTime(),
    };
  },
  computed: {
    player() { return this.$refs.videoPlayer.player; }
  },
  created() {
    this.userId= window.person.user_id;
    this.time=window.activityRestTime;
    this.formatImgLink();
    this.getSeckillGoods(); //请求秒杀商品
    this.isVip();
    this.couponStatus();
    
    const picList = {
      index01: "index01.jpg",
      share_btn: "share_btn.png",
      countdow: "countdow.jpg",
      index02: "index02.jpg",
      get: "get.png",
      vip: "vip.png",
      lineTitle1: "line-title1.jpg",
      index03: "index03.jpg",
      index04: "index04.jpg",
      index05: "index05.jpg",
      index32: "index32.png",
      index06: "index06.jpg",
      index07: "index07.jpg",
      index08: "index08.jpg",
      index09: "index09.jpg",
      index10: "index10.jpg",
      index11: "index11.jpg",
      index12: "index12.jpg",
      index13: "index13.jpg",
      index14: "index14.jpg",
      index15: "index15.jpg",
      index16: "index16.jpg",
      index17: "index17.jpg",
      index18: "index18.jpg",
      index19: "index19.jpg",
      index20: "index20.jpg",
      index21: "index21.jpg",
      index22: "index22.jpg",
      index23: "index23.jpg",
      index24: "index24.jpg",
      index25: "index25.jpg",
      index26: "index26.jpg",
      index27: "index27.jpg",
      index28: "index28.jpg",
      index29: "index29.jpg",
      index30: "index30.jpg",
      index31: "index31.png",
      bottomBtn: "bottom-btn.png",
      prop01: "prop01.png",
      prop02: "prop02.png",
      prop03: "prop03.png",
      prop04: "prop04.png",
      prop05: "prop05.png",
      prop06: "prop06.png",
      prop07: "prop07.png",
      prop08: "prop08.png",
      prop09: "prop09.png",
      prop10: "prop10.png",
      discount50:'discount50.png',
      discount100:'discount100.png',
      win01:'win01.png',
      win02:'win02.png',
      win03:'win03.png',
    };
    this.totalPic = filterPic(picList);
    this.goodsList = [
      { name: 62055, imgLink: this.totalPic.prop01 },
      { name: 62141, imgLink: this.totalPic.prop02 },
      { name: 62321, imgLink: this.totalPic.prop03 },
      { name: 62227, imgLink: this.totalPic.prop04 },
      { name: 62059, imgLink: this.totalPic.prop05 },
      { name: 62057, imgLink: this.totalPic.prop06 },
      { name: 61827, imgLink: this.totalPic.prop07 },
      { name: 61837, imgLink: this.totalPic.prop08 },
      { name: 61499, imgLink: this.totalPic.prop09 },
      { name: 62251, imgLink: this.totalPic.prop10 }
    ];
  },
  mounted() {
    backTop("return-top");
    this.countDownTime();
    //更多专区
    cloArea('62055,61971,62233,61835,62219,62257,62223,62227,61867,62251,62141,62207,62057,62013,62221,61969,61499,62017,62321,62059,62213,62309,62079,62127,62143,62433,62301,62145,62205,62201,62307,61973,62417,61885,61839,62215,62031,62349,61793,62305,62095,62155,62431,61823,62109,62125,62139,62203,61833,62135,62323,62199,61961,62191,62161,62229,61865,61981,62027,62313,61893,62111,62083,62425,62197,61827,62073,62063,62189,62195,61831,62193,62429');
  },
  methods: {
    initSeckillTime(){
      var currTime=this.nowTime;
      console.log('time'+currTime);
      var calcTimeA=this.killStartTime-currTime*1000;
      var calcTimeB=this.killEndTime-currTime*1000;
      if(calcTimeA>0){
        this.showKillTab=false
      }else if(calcTimeA <= 0 && calcTimeB>0){
        this.showKillTab=true
      }else if(calcTimeB <= 0){
        this.showKillTab=true;
        this.showNextDayTab=false;
      }
    },
    closeModal(){
      this.showModal=false;
      this.mask=0;
    },
    linkTo(val){ 
      jump2url(`${window.location.origin}${val}`);
    },
    //跳入秒杀频道
    jumpTo(){
      window.location.href='https://m.shandjj.com/index.php/ActivitySpike/index/tj/3';
    },
    //今日秒杀&&明日预告
    changeIndex(val) { this.isActive = val; },
    //设置秒杀提醒
    remindMe(item,tab) {
      var _this=this;
      var ajaxt ='?'+new Date().getTime();
      $.ajax({
        type:'GET',
        url:`${BaseUrl}/index.php/AnniversaryCake/getNotice`+ajaxt,
        async: true,
        dataType: "json",
        data:{ userId:this.userId,goodsId:item.goods_id,startTime:item.open_time},
        success:function(res){
          if(res.code==200&&res.status=='success'){
            var info='';
            if(res.type==1){
              if(tab=='tab1'){
                _this.todayList.forEach((list,index) =>{if(item.goods_id==list.goods_id){list.saleCount=3} });
              }else{
                _this.nextdayList.forEach((list,index) =>{ if(item.goods_id==list.goods_id){list.saleCount=3}  });
              };
              _this.showModal=true;
              _this.mask=2;
            }else if(res.type==1000||res.type==5000){info='参数类型错误!'}
            else if(res.type==2000){info='您已订阅!'}
            else if(res.type==2001){info='您想订阅的内容即将开始!'}
            else if(res.type==2002){info='您想订阅的内容已开始，无需订阅!'}
            else{info='订阅失败!'}
            if(info){ _this.$vux.toast.text(info, "middle") }
          }
        }
      });
    },
    //秒杀商品设置
    skipGoods(list) {
      jump2good(list.goods_id);
    },
    //判断是否是SVIP
    isVip(){
      var _this=this;
      var ajaxt ='?'+new Date().getTime();
      $.post({
        url:`${BaseUrl}/index.php/VipUser/isVipRight`+ajaxt,
        async: false,
        dataType: "json",
        data:{ userId:this.userId},
        success:function(res){
          if(res.code== 200 &&res.status=='success'){ _this.isSuperVip=res.isVip }
          else{_this.$vux.toast.text('获取用户数据失败!', 'middle') }
        }
      });
    },
    //判断券转态
    couponStatus(){
      var _this=this;
      var ajaxt ='?'+new Date().getTime();
      $.get({
        url:`${BaseUrl}/index.php/AnniversaryCake/getUserCoupon`+ajaxt,
        async: false,
        dataType: "json",
        data:{ userId:this.userId},
        success:function(res){
          if(res.code== 200 &&res.status=='success'){ 
            _this.getAll=res.data.group;
            _this.conponInfo=res.data.singular;
            _this.singSivp=res.data.singSivp;
          } else {
            _this.$vux.toast.text("获取用户数据失败!", "middle");
          }
        }
      });
    },
    //领取优惠券
    getCoupon(couponItem,index) {
      var _this=this;
      if(couponItem.type==1){ 
        this.$vux.toast.text('你已领取过该券!');
        return ;
      };
      var ajaxt ='?'+new Date().getTime();
      $.ajax({
        url:`${BaseUrl}/index.php/AnniversaryCake/vipUserCoupon`+ajaxt,
        async: true,
        dataType: "json",
        data:{userId:this.userId,couponId:couponItem.couponId},
        success:function(res){
          if(res.code==200 && res.status=='success'){
            var toastInfo='';
            if(res.type==1){
              var restTicket=0;
              _this.conponInfo.forEach((element,idx) => {
                if(element.type==1){
                  restTicket=restTicket+1;
                }else if(element.type==0&&index==idx){
                  element.type=1;
                  restTicket=restTicket+1;
                }
              });
              //点取领劵的时候判断是否都是领过的状态
              if(restTicket==_this.conponInfo.length){_this.getAll=1}
              _this.showModal=true;
              _this.mask=3;
            }else if(res.type==2){toastInfo='您已经领过了哦'}
            else if(res.type==3){toastInfo='亲！您还不是SVIP会员!'}
            else{toastInfo='领券失败!'}
            if(toastInfo){_this.$vux.toast.text(toastInfo);}
          } else {
            _this.$vux.toast.text("领券失败!");
          }
        }
      });
    },
    //超级会员领取
    getCouponVip(couponItem){
      if(!this.isSuperVip){
        this.$vux.toast.text('亲！您还不是SVIP会员!');
        return ;
      };
      if(couponItem.type==1){ 
        this.$vux.toast.text('你已领取过该券!');
        return ;
      };
      var _this=this;
      var ajaxt ='?'+new Date().getTime();
      $.ajax({
        url:`${BaseUrl}/index.php/AnniversaryCake/vipUserCoupon`+ajaxt,
        async: true,
        dataType: "json",
        data:{userId:this.userId,couponId:couponItem.couponId},
        success:function(res){
          if(res.code==200 && res.status=='success'){
            var toastInfo='';
            if(res.type==1){
              _this.singSivp.type=1;//超级会员领取完状态置为1（已领）
              _this.mask=1;
              _this.showModal=true;
            }else if(res.type==2){toastInfo='您已经领过了哦'}
            else if(res.type==3){toastInfo='亲！您还不是SVIP会员!'}
            else{toastInfo='领券失败!'}
            if(toastInfo){_this.$vux.toast.text(toastInfo);}
          } else {
            _this.$vux.toast.text("领券失败!");
          }
        }
      });
    },
    //一键领取
    getAllCoupon(){
      var _this=this;
      if(this.getAll==0){
        var ajaxt ='?'+new Date().getTime();
        if(!this.isAjax){
          $.get({
            url:`${BaseUrl}/index.php/AnniversaryCake/allUserCoupons`+ajaxt,
            async: true,
            dataType: "json",
            data:{ userId:this.userId},
            success:function(res){
              if(res.code== 200 &&res.status=='success'){ 
                _this.getAll=res.type;
                _this.conponInfo.forEach((element,idx) => { element.type=1});
                _this.mask=3;
                _this.showModal=true;
              }else{
                _this.$vux.toast.text('刷新重试!');
              }
            }
          });
        };
        this.isAjax=true;
      }else{
        this.$vux.toast.text('抱歉，你已不可一键领取!')
      }
    },
    onShare() {
      //分享页面
      setTimeout(function() {
        share("哎哟有型328周年庆", "购物狂欢进行时，领500元券，抽iPhone，SupremeT恤99元抢！");
      }, 300);
    },
    // 跳转商品详情
    goDetail(value) { jump2good(value); },
    //倒计时
    countDownTime() {
      var that = this;
      this.i++;
      this.time--;
      var time = this.time;
      let second = time % 60; // miao
      let min = time / 60 > 0 ? parseInt((time / 60) % 60) : 0;
      let hour = parseInt((time / 60 / 60) % 24) > 0 ? parseInt((time / 60 / 60) % 24) : 0;
      let day = parseInt(time / 60 / 60 / 24) > 0 ? parseInt(time / 60 / 60 / 24) : 0;
      let totalTime = {
        ge: String(second)[1] ? String(second)[1] : String(second)[0],
        shi: String(second).length == 2 ? String(second)[0] : "0",
        bai: String(min)[1] ? String(min)[1] : String(min)[0],
        qian: String(min).length == 2 ? String(min)[0] : "0",
        wan: String(hour)[1] ? String(hour)[1] : String(hour)[0],
        shiwan: String(hour).length == 2 ? String(hour)[0] : "0",
        baiwan: String(day)[1] ? String(day)[1] : String(day)[0],
        qianwan: String(day).length == 2 ? String(day)[0] : "0",
        totalTime: `${day}天${hour}小时${min}分${second}秒`
      };
      this.totalTime = totalTime;
      if (time <= 0) {
        if(window.activityLimitTime<=0){ return }
        this.time=window.activityLimitTime?window.activityLimitTime:0;
        this.calcTimeTxt='结束';
      };
      setTimeout(function() {
        that.countDownTime();
      }, 1000);
    },
    // 进入游戏页面
    enterGamePage() {
      jump2url(`${window.location.origin}/Active/cakeGame`);
    },
    //会场跳转
    activitySwitch(val) {
      switch (val) {
        case 0:
          jump2url(`${window.location.origin}/TaoAction/index`);
          break;
        case 1:
          jump2url(`${window.location.origin}/TaoAction/newSeason`);
          break;
        case 2:
          jump2url(`${window.location.origin}/TaoAction/clothesSub`);
          break;
        case 3:
          jump2url(`${window.location.origin}/TaoAction/myCoupon3`);
          break;
        default:
          jump2url(`${window.location.origin}/TaoAction/index`);
      }
    },
    //秒杀商品
    getSeckillGoods(){
      var _this=this;
      var ajaxt ='?'+new Date().getTime();
      $.get({
        url:`${BaseUrl}/index.php/AnniversaryCake/getGoodsList`+ajaxt,
        async: true,
        dataType: "json",
        data:{ userId:this.userId},
        success:function(res){
          if(res.code==200&&res.status=='success'){
            var responseData=res.data;
            _this.todayList=responseData.today;
            _this.nextdayList=responseData.tomorrow;
            _this.nowTime=responseData.nowTime;
            _this.initSeckillTime();
          }
        }
      });
    },
    //处理静态资源地址
    formatImgLink(){
      var tempLink=resetAddress();
      if(tempLink.type=='devLine'){
        this.setLinkString=`${tempLink.assetsLink}/default/ActiveImg/celebration/img/`;
      }else if(tempLink.type=='testLine'){
        this.setLinkString=`${tempLink.assetsLink}/default/ActiveImg/celebration/img/`;
      }else if(tempLink.type=='onLine'){
        this.setLinkString=`${tempLink.assetsLink}/default/ActiveImg/celebration/img/`;
      };
    },
  }
};
</script>

<style lang="less">
html,
body {
  width: 100%;
  height: 100%;
  position: relative;
  background: #7a0000;
}
.main-page {
  width: 100%;
  height: 100%;
  position: relative;
}
img {
  width: 100%;
}
.container {
  font-size: 0.32rem;
  padding-bottom: 1.5rem;
  background-color: #7a0000;
}
.active {
  background-color: #ff503b;
}
.bottom-btn {
  position: fixed;
  bottom: 0;
  z-index: 100;
  img {
    vertical-align: bottom;
  }
}
.main-page .banner {
  position: relative;
  .share {
    position: absolute;
    top: 0.08rem;
    right: 0;
    width: 1.46rem;
  }
  .scroll-component {
    position: absolute;
    left: 0.25rem;
    top: 3.9rem;
  }
}
.coupon-wraper {
  box-sizing: border-box;
  margin: 0 0.15rem;
  padding: 0.15rem;
  background-color: #b10001;
}
.tab-button {
  display: flex;
  padding: 0 0.15rem;
  background-color: #7a0000;
  align-items: center;
  span {
    display: flex;
    flex: 1;
    text-align: center;
    height: 0.75rem;
    align-items: center;
    padding: 0 0.1rem;
    justify-content: center;
    margin: 0.03rem 0.03rem 0;
  }
}
.coupon {
  display: flex;
  .coupon-list {
    width: 5.95rem;
    display: flex;
    flex-wrap: wrap;
    .single-coupon {
      width: 33%;
      margin-right: 0.33%;
      margin-bottom: 0.1rem;
      position: relative;
      .count_num {
        position: absolute;
        top: 0.06rem;
        left: 0.36rem;
        color: #b10001;
        font-size: 0.34rem;
        font-weight: 600;
      }
      .count_limit {
        width: 0.7rem;
        position: absolute;
        top: 0.1rem;
        right: 0.25rem;
        color: #fff;
        font-size: 0.16rem;
        text-align: center;
      }
      .mask {
        width: 0.4rem;
        height: 0.4rem;
        line-height: 0.4rem;
        border: 1px solid #b10001;
        font-size: 0.12rem;
        text-align: center;
        color: #b10001;
        border-radius: 50%;
        position: absolute;
        top: 0.35rem;
        left: 0.07rem;
      }
    }
  }
  .get-btn {
    width: 1.13rem;
  }
}
.count-down {
  position: relative;
  color: #fff;
  .tip,
  .time {
    position: absolute;
    width: 100%;
    text-align: center;
  }
  .tip {
    top: 0;
    line-height: 0.5rem;
    font-size: 0.3rem;
  }
  .time {
    top: 0.6rem;
    height: 0.4rem;
    line-height: 0.4rem;
    overflow: hidden;
  }
  em {
    display: inline-block;
    width: 0.34rem;
    text-align: center;
    height: 0.43rem;
    line-height: 0.43rem;
    margin: 0 0.02rem;
    background-color: #fff;
    color: #000;
    font-style: normal;
  }
}
.seckill-goods {
  .button {
    display: flex;
    line-height: 0.75rem;
    margin: 0 0.15rem;
    color: #fff;
    background: #7a0000;
    font-weight: bold;
    span {
      display: flex;
      flex: 1;
      text-align: center;
      height: 0.75rem;
      align-items: center;
      padding: 0 0.1rem;
      justify-content: center;
      margin: 0.03rem 0.03rem 0;
    }
  }
  .svip {
    margin-top: 0.12rem;
    margin-bottom: 0.02rem;
    position: relative;
    .btn {
      width: 50%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    .width_left {
      left: 0%;
    }
    .width_right {
      left: 50%;
    }
  }
}
.btn {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.width_left {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.width_right {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
}
.goods-wrap {
  margin: 0 0.18rem;
  padding: 0.15rem 0;
  display: flex;
  flex-wrap: wrap;
  background-color: #ff503b;
  .goods {
    box-sizing: border-box;
    width: 2.2rem;
    margin: 0 0.09rem;
    padding: 0 0.05rem;
    border: 1px solid #000;
    border-radius: 0.1rem;
    background-color: #fff;
    .title {
      width: 2.07rem;
      margin-top: 0.05rem;
      line-height: 0.4rem;
      text-align: center;
      font-size: 0.2rem;
      color: #fff;
      background-color: #f22c23;
    }
    .goods-name {
      font-size: 0.26rem;
      line-height: 0.3rem;
      height: 0.6rem;
      overflow: hidden;
    }
    .price-btn {
      display: flex;
      justify-content: space-around;
      font-size: 0.3rem;
      color: #f22c23;
    }
    .buy-btn {
      width: 1.04rem;
      height: 0.34rem;
      line-height: 0.34rem;
      text-align: center;
      // border-radius: 0.08rem;
      background-color: #b10001;
      font-size: 0.22rem;
      color: #fff;
    }
  }
}

.pic-goods {
  background-color: #7a0000;

  display: flex;
  flex-wrap: wrap;
  .pic {
    margin-top: 0.14rem !important;
  }
}
.pic-url {
  background-color: #7a0000;
  // padding-bottom: .15rem;
  display: flex;
  flex-wrap: wrap;
  .url {
    margin-top: 0.14rem !important;
    img {
      height: 100%;
    }
  }
  .pic {
    margin-top: 0.14rem !important;
  }
}

.pos-rel {
  position: relative;
}

.region-wrapper {
  .mult-region {
    display: flex;
    margin: 0 0.15rem;
    background: url(../../../assets/images/celebration/icon/bg1.jpg);
    .big-pic {
      width: 2.07rem;
      height: 2.71rem;
    }
    .region {
      width: 5.14rem;
      display: flex;
      flex-wrap: wrap;
      .pic {
        width: 2.47rem;
        height: 1.26rem;
        margin-right: 0.08rem;
        margin-bottom: 0.16rem;
      }
    }
  }
}
.cloth-region {
  margin: 0 0.15rem;
  background-color: #ff503b;
  .pic-video {
    padding: 0.15rem 0;
  }
}
.cloth-region {
  .pic,
  .url {
    width: 2.12rem;
    padding: 0.06rem;
    margin: 0 0.06rem;
    border: 1px solid #000;
    border-radius: 0.06rem;
    background-color: #fff;
    .goods-name {
      height: 0.34rem;
      line-height: 0.34rem;
      overflow: hidden;
      color: #535353;
    }
    .price-btn {
      display: flex;
      justify-content: space-around;
      font-size: 0.34rem;
      color: #f22c23;
      .buy-btn {
        width: 1.05rem;
        height: 0.44rem;
        line-height: 0.44rem;
        text-align: center;
        color: #fff;
        font-size: 0.24rem;
        background-color: #b10001;
      }
    }
  }
}

.big-trademark {
  margin: 0.15rem;
}

// 视频位置处理
.video-player {
  margin-top: .42rem;
  padding: 0 .2rem;
}
.goods-pic{
  position: relative;
}
.goods-pic .icon{
  width:100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.video{
  width: 4.3rem;
  height: 100%;
  position: absolute;
  left: 37.33%;
  top: 0px;
}
.modal-mask{
  width:100%;
  height: 100%;
  position: fixed;
  z-index: 1001;
  top: 0;
  left: 0;
  background:rgba(0,0,0,0.4);
  &>div{
    width: 5rem;
    margin: 2.8rem auto 0;
    position: relative;
    .close{
      width: 1rem;
      height: 1rem;
      position: absolute;
      bottom: 0.1rem;
      left: 1.92rem;
    }
  }
}
</style>




